<template>
<!--
  主显示区域，位于最中间的部分，包含了 窗口标签和对应的导航显示
-->
    <div id="main">
        <!--    窗口标签    -->
<!--        <window-nav v-if="widowsLabel.windowLabels.length!==0"/>-->
        <window-scroll v-if="widowsLabel.windowLabels.length!==0"/>
        <!--   窗口视图     -->
      <div id="view">
<!--        <Transition class="animate__animated animate__fadeInLeft">-->
<!--          <router-view></router-view>-->
<!--        </Transition>-->
        <router-view v-slot="{ Component }">
          <transition name="list">
            <component :is="Component" />
          </transition>
        </router-view>
      </div>
    </div>
</template>

<script setup>
import {useWindowsStore} from "../../../store/windows";
import {useThemeStore} from "../../../store/theme";
import WindowScroll from "./label/WindowScroll.vue";

const widowsLabel=useWindowsStore()
const theme=useThemeStore()
</script>

<style scoped>
#main{
    flex: 1;
    display: flex;
    flex-direction: column;
}
#view{
  height: 100vh;
  overflow: hidden;
  background-color: v-bind('theme.color.MenuPage.backgroundColor');
}

.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>